<template>
	<view class="page">
		<scroll-view class="left" scroll-y :style="'height:'+height+'px'">
			<view
				class="item"
				@click="select(item, index)"
				:class="index==activeIndex?'active':''"
				v-for="(item, index) in info"
				:key="item.gcid">
				<text>{{item.name}}</text>
			</view>
		</scroll-view>
		<scroll-view
				class="right"
				scroll-y
				:style="'height:'+height+'px'"
				scroll-with-animation
				enable-back-to-top>
			<view class="item" v-for="item in list" :key="item.goodsid">
				<Goods :goods="item"></Goods>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { getAllType } from '../../api/api.js'
	import Goods from '../../components/Goods.vue'
	export default {
		data () {
			return {
				info: [],
				list: [],
				height: 0,
				activeIndex: 0
			}
		},
		onLoad:function(){
			// 获取设备可用高度并设置scroll的高度
			this.height = uni.getSystemInfoSync().windowHeight;
		},
		onReady:function(){
			this.init();
		},
		methods:{
			init () {
				let query = {
					token: '888888'
				}
				getAllType(query).then(res => {
					this.info = res.classs
					this.list = this.format(res.classs[0].goods)
				})
			},
			select (item, index) {
				// 切换菜单
				this.activeIndex = index
				this.list = this.format(item.goods)
			},
			format (items) {
				let newArr = []
				items.forEach(e => {
					let { goodsid: id, title: name, marke: discount, img, markeprice: vipprice, tiaoid, price, havnum: stock } = e
					let newItem = { id, name, discount, img, vipprice, tiaoid, price, stock, number: 0 }
					newArr.push(newItem)
				})
				return newArr
			}
		},
		components:{
			Goods
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/common/css/mixin.scss';
	.page {
		width: 100%;
		display: flex;
		.left {
			width: 160upx;
			margin-right: 20upx;
			background-color: #fff;
			text-align: center;
			font-size: 25upx;
			.item {
				height: 90upx;
				line-height: 90upx;
				@extend %ell;
				color: $M_F;
				font-weight: 550;
				&.active {
					color: $M_PINK;
					background-color: $M_BG;
				}
			}
		}
		.right {
			flex: 1;
			background-color: #fff;
			.item {
				width: 100%;
				box-sizing: border-box;
			}
		}
	}
</style>
